<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <h1>{{msg}}</h1>
        <!-- 使用指令 v-开头就是指令-->
        <!-- v-text将变量或者表达式作为字符串解析 -->
        <h1 v-text="msg2"></h1>
        <!-- v-html将其作为html代码解析 -->
        <h1 v-html="msg2"></h1>
        <!-- v-text和v-html谁安全（innerText和innerHtml谁安全）
            v-text 安全  v-html不安全  -->
        <h1 v-text="msg3.toUpperCase()"></h1>

        <h1>{{msg}}</h1>
        <!-- v-once实现的是一次性插入，当值再次发生改变时，它不再更改 -->
        <h1 v-once>{{msg}}</h1>

        <!-- v-bind供标签上的属性使用 -->
        <div title="title效果">title</div>
        <a href="http://baidu.com">百度一下</a>
        <!--通过v-bind绑定的标签上的属性后面的值即为变量或者表达式   -->
        <div v-bind:title="msg">title</div>
        <a v-bind:href="url">{{msg}}</a>
        <!-- 简写 -->
        <a :href="url">{{msg}}</a>
    </div>
    <script>
        let vm = new Vue({
            el:".box",
            data:{
                msg:"你快乐吗？",
                msg2:'<div>快乐呀</div>',
                msg3:'asfcsfgsg',
                url:'http://baidu.com'
            }
        })
    </script>
</body>
</html>